import {LockOutlined} from '@ant-design/icons';
import {PageContainer, ProList} from '@ant-design/pro-components';
import {Avatar, Flex, Progress, Space, TablePaginationConfig, Tag, Typography} from 'antd';
import {PaginationConfig} from 'antd/es/pagination';
import type {Key} from 'antd/lib/table/interface';
import {useState} from 'react';

import {getSubmissionList} from '@/services/administrative/task-center';
import {SearchParams} from '@/utils/types/administrative/file-collection';

const TaskCenter = () => {

  // 下划线
  const [underline, setUnderline] = useState<Key>(null)

  return (
    <PageContainer header={{title: null}}>
      <ProList
        metas={{
          title: {
            dataIndex: 'title',
            title: '标题',
            render: (_, record) => (
              <Typography.Title
                onMouseEnter={() => setUnderline(record.task_id)}
                onMouseLeave={() => setUnderline(null)}
                underline={underline === record.task_id}
                ellipsis={{
                  rows: 1,
                }}
                level={3}
              >
                {record.title}{record.access !== 'public' && <LockOutlined style={{color: '#e0534f', fontSize: 18}}/>}
              </Typography.Title>
            ),
          },
          avatar: {
            dataIndex: 'title',
            search: false,
            render: (_, record) => (
              <Flex justify={'center'} align={'center'}>
                <div style={{
                  display: 'inline-block', width: 1, height: 120,
                  backgroundColor: new Date(record.end_time).getTime() < Date.now() ? 'red' : '#52c41a',
                }}></div>
                <Avatar size={80} style={{marginLeft: 20, fontSize: 35}}>
                  {record.title?.match(/[\u4e00-\u9fa5A-Za-z]/)[0].toUpperCase()}
                </Avatar>
              </Flex>
            ),
          },
          description: {
            dataIndex: 'content',
            search: false,
            render: (_, record) => (
              <>
                <Typography.Paragraph
                  ellipsis={{rows: 3}}
                >
                  {new DOMParser().parseFromString(record.content, 'text/html').body.textContent}
                </Typography.Paragraph>
                <Space wrap size={'large'}>
                  <Typography.Text>
                    创建人：<Typography.Text code>{record.founder_name}</Typography.Text>
                  </Typography.Text>
                  <Typography.Text type={'secondary'}>
                    提交人数：{record.submitted_number ?? 0} / {record.total_number ?? 0}
                  </Typography.Text>
                  {record.end_time && <Typography.Text strong>
                    截止时间：{new Date(record.end_time).toLocaleString()}
                  </Typography.Text>}
                </Space>
                <Progress
                  percent={
                    Date.now() > new Date(record.end_time).getTime() ? 100 :
                      (
                        (Date.now() - new Date(record.created_time).getTime()) /
                        (new Date(record.end_time).getTime() - new Date(record.created_time).getTime())
                      ) * 100
                  }
                  size={{height: 3}} showInfo={false}
                  format={(value) => Math.round(value as number) + '%'}
                  status={Date.now() > new Date(record.end_time).getTime() ? 'success' : 'active'}
                />
              </>
            ),
          },
          subTitle: {
            render: (_, record) => (
              <Space size={0}>
                {record.access === 'public' ?
                  <Tag color={'green'}>公开</Tag> :
                  record.access === 'private' ?
                    <Tag color={'red'}>私有</Tag> :
                    <Tag color={'orange'}>指定人员</Tag>}
              </Space>
            ),
            search: false,
          },
          actions: {
            render: (_, record) => (
              new Date(record.end_time).getTime() < Date.now() ?
                <Tag color={'red'}>已结束</Tag> : <Tag color={'green'}>进行中</Tag>
            ),
            search: false,
          },
        }}
        search={{}}
        request={
          async (params: SearchParams) => {
            const response = await getSubmissionList(params)
            return {
              data: response.data.list,
              success: true,
              total: response.data.total,
            };
          }
        }
        pagination={{
          defaultCurrent: 1,
          defaultPageSize: 10,
        } as ((false & PaginationConfig) | false |
          (TablePaginationConfig & PaginationConfig) | (TablePaginationConfig & false) | undefined)}
      >

      </ProList>
    </PageContainer>
  )
}

export default TaskCenter;
